<template>
    <div class="home">
        <homeHeader></homeHeader>
        <homeSwiper :swiperList = 'swiperList'></homeSwiper>  
        <homeIcons :iconsList = 'iconsList'></homeIcons>
        <homeLocation></homeLocation>
        <homeActivity></homeActivity>
        <homeHot :hotList = 'hotList'></homeHot>
        <homeLike :likeList = 'likeList'></homeLike>
        <homeVacation :vacationList = 'vacationList'></homeVacation>
    </div>
</template>
<script>
    import {mapState} from 'vuex'
    import homeHeader from './pages/header'
    import homeSwiper from './pages/swiper'
    import homeIcons from './pages/icons'
    import homeLocation from './pages/location'
    import homeActivity from './pages/activity'
    import homeHot from './pages/hot'
    import homeLike from './pages/like'
    import homeVacation from './pages/vacation'

    export default{
        components:{
            homeHeader,
            homeSwiper,
            homeIcons,
            homeLocation,
            homeActivity,
            homeHot,
            homeLike,
            homeVacation
        },
        data(){
            return{
                swiperList:[],
                iconsList:[],
                hotList:[],
                likeList:[],
                vacationList:[],
                changeCity:''
            }
        },
        computed:{
            ...mapState(['city'])
        },
        mounted(){
            this.changeCity = this.city
           this.getHttp()
        },
        activated(){
            if (this.changeCity != this.city) {
                this.getHttp()
                this.changeCity = this.city
            }
        },
        methods:{
            getHttp(){
                this.$http.get("/api/dataHome.json").then((res)=>{
                    const data = res.data.data
                    data.forEach((item,index) => {
                        if (item.city==this.city) {
                            this.swiperList = item.swiperList
                            this.iconsList = item.iconsList
                            this.hotList = item.hotList
                            this.likeList = item.likeList
                            this.vacationList = item.vacationList  
                        }
                    });
                })
            }
        }
    }
</script>
<style scoped>
    .home{
        background: #f5f5f5;
    }
</style>